<template>
  <div class="_wz_operations">

    <div class="_wz_operations_list">
     <div style="height: 100%;">
       <div class="_wz_dy_title _wz_title_select" style="padding: 0 0 0 40px;">实时车辆营运/离线统计</div>
       <div style="display: flex;justify-content: flex-end;margin-top: 10px;height: 30px">
         <div class="listItemTopl top0" style="font-family:'Barlow-Medium1'">3天</div>
         <div class="listItemTopl top1" style="font-family:'Barlow-Medium1'">7天</div>
         <div class="listItemTopl top0" style="font-family:'Barlow-Medium1'">15天</div>
         <div class="listItemTopl top0" style="font-family:'Barlow-Medium1'">30天</div>
         <div class="listItemTopl top0" style="font-family:'Barlow-Medium1'">60天</div>
       </div>
       <div style="display: flex;height: calc(100% - 30px - 35px - 60px);">
         <div style="width: 50%;height:100%;" :id="pieId"></div>
         <div style="width: 50%;height:100%;" :id="pieId1"></div>
       </div>
       <div style="height: 60px;color: white;display: flex;align-items: center;justify-content:space-around">
         <div style="display: flex;align-items: center">
           <div style="display: flex;align-items: center">
             <div style="width: 22px;height: 14px;background: #28BCFE;border-radius:3px"></div>
             <div style="margin-left: 5px">车辆营运</div>
           </div>
           <div style="margin-left: 10px;font-family:'Barlow-Medium1'">
             2242
           </div>
         </div>
         <div style="display: flex;align-items: center">
           <div style="display: flex;align-items: center">
             <div style="width: 22px;height: 14px;background: #ff9900;border-radius:3px"></div>
             <div style="margin-left: 5px">车辆离线</div>
           </div>
           <div style="margin-left: 10px;font-family:'Barlow-Medium1'">2242</div>
         </div>
       </div>
     </div>


    </div>

    <div class="_wz_operations_list">
      <div class="_wz_dy_title">
        <span :class="{'_wz_title_select' : daySwitching == 0 }" @click="daySwitching = 0" @mouseenter="dayCarousel = false" @mouseleave=" dayCarousel = true">日车辆行驶里程排名</span>
        <span :class="{'_wz_title_select' : daySwitching == 1 }" @click="daySwitching = 1" @mouseenter="dayCarousel = false" @mouseleave=" dayCarousel = true">日企业运营率排名</span>
      </div>
      <div class="_wz_dy_div">
        <Carousel v-model="daySwitching" style="height: 100%;" dots="none" arrow="never" :autoplay="dayCarousel" :autoplay-speed="5000">
          <CarouselItem style="height: 100%;">
            <tableRoll :tableData="tableData"  @mouseenter="dayCarousel = false" @mouseleave=" dayCarousel = true"/>
          </CarouselItem>
          <CarouselItem style="height: 100%;">
            <tableRoll :tableData="tableData1"  @mouseenter="dayCarousel = false" @mouseleave=" dayCarousel = true"/>
          </CarouselItem>
        </Carousel>
      </div>

    </div>
    <div class="_wz_operations_list">
      <div class="_wz_dy_title">
        <span :class="{'_wz_title_select' : weeklySwitching == 0 }" @click="weeklySwitching = 0"  @mouseenter="weekCarousel = false" @mouseleave=" weekCarousel = true">车辆行驶趋势</span>
        <span :class="{'_wz_title_select' : weeklySwitching == 1 }" @click="weeklySwitching = 1"  @mouseenter="weekCarousel = false" @mouseleave=" weekCarousel = true">车辆运营趋势</span>
      </div>
      <div class="_wz_dy_div">
        <Carousel v-model="weeklySwitching" style="height: 100%;" dots="none" arrow="never" :autoplay="weekCarousel" :autoplay-speed="5000">
          <CarouselItem style="height: 100%;">
            <lineChart :dataConfiguration="lineChartData" v-if="!!lineChartData.dataList && lineChartData.dataList.length > 0"   @mouseenter="weekCarousel = false" @mouseleave=" weekCarousel = true"/>
          </CarouselItem>
          <CarouselItem style="height: 100%;">
            <areaChart :dataConfiguration="areaChartData" v-if="!!areaChartData.dataList && areaChartData.dataList.length > 0"   @mouseenter="weekCarousel = false" @mouseleave=" weekCarousel = true"/>
          </CarouselItem>
        </Carousel>
      </div>
    </div>
    <modulePage ref="moduleRef"></modulePage>
  </div>
</template>
<script>

import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'
import dayjs from "dayjs";
import {getMenu} from "@/util/getMenu";
import {getFirstMenu} from "@/router/dynamicRouting";
//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex



import lineChart from '@/components/charts/baiDu/lineChart/charts.vue'  //折线图
import areaChart from '@/components/charts/baiDu/areaChart/charts.vue'  //面积图
import tableRoll from '../dynamicVehicle/tableRoll.vue'  //表格轮播
import modulePage from '../../operational/modulePage.vue'  //全部图Charts
//reactive
export default defineComponent({
  name: 'operations',//组件名称
  components: {
    lineChart,//折线图
    areaChart,//面积图
    tableRoll,//表格轮播
    modulePage,//全部图Charts
  },//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const $dayjs = inject('$dayjs');//引用全局组件
    const router = useRouter();//路由跳转使用
    const $common = inject('$common');//自己封装的方法


    const state = reactive({
      pieId:'pieId',//实时车辆营运
      pieId1:'pieId1',//离线统计
      moduleRef:ref(),
      dayCarousel:true,//天的轮播切换
      weekCarousel:true,//天的轮播切换
      daySwitching:0,//当日切换
      weeklySwitching:0,//周切换
      lineChartData:{//折线图数据
        "id":"lineChart",
        "width":'100%',
        "height":'100%',
        "colors":["#2d8cf0","#19be6b","#ff9900","#ed4014","#9b66e6","#3fcece","#4b588d","#b7b83f","#b9783f","#4efd95","#2ebdcc","#375397","#22597e","#2e33d1","#3bd2a6","#95CEFF","#A9FF96","#FFBC75","#AAFFFA","#999EFF","#FF7599","#FDEC6D","#44A9A8","#2D8CF0"],
        "xColor":"#fff",
        "yColor":"#fff",
        "xShow":false,
        "yShow":true,
        "backColor":"rgba(0,0,0,0)",
        "legendColor":"#fff",
        "dataList":[],
        "legend":0,
        "marginUnit":"%",
        "top":20,
        "right":4,
        "bottom":4,
        "left":4
      },
      areaChartData:{//周期车辆运营趋势
        "id":"areaChart1",
        "width":'100%',
        "height":'100%',
        "colors":["#2d8cf0","#19be6b","#ff9900","#ed4014","#9b66e6","#3fcece","#4b588d","#b7b83f","#b9783f","#4efd95","#2ebdcc","#375397","#22597e","#2e33d1","#3bd2a6","#95CEFF","#A9FF96","#FFBC75","#AAFFFA","#999EFF","#FF7599","#FDEC6D","#44A9A8","#2D8CF0"],
        "xColor":"#fff",
        "yColor":"#fff",
        "xShow":false,
        "yShow":true,
        "backColor":"rgba(0,0,0,0)",
        "legendColor":"#fff",
        "dataList":[],
        "legend":1,
        "marginUnit":"%",
        "top":20,
        "right":4,
        "bottom":4,
        "left":4
      },


      //日车辆行驶里程排名
      tableData:{
        headData:[
          {name:'排名',width:50,key:'pm'},
          {name:'车牌号',width:90,key:'cph'},
          {name:'运输企业',key:'ysqy'},
          // {name:'运输类型',width:85,key:'yslx'},
          {name:'行驶里程',width:90,key:'xslc'},
        ],
        dataList:[]
      },
      //日企业运营率排名
      tableData1:{
        headData:[
          {name:'排名',width:50,key:'pm'},
          {name:'车牌号',width:90,key:'cph'},
          {name:'运输企业',key:'ysqy'},
          // {name:'运输类型',width:100,key:'yslx'},
          {name:'行驶率',width:90,key:'xslc'},
        ],
        dataList:[]
      }




    });


    //页面加载初始化
    const loadInit = ()=>{

      state.lineChartData.dataList = [
        {"type":"行驶历程（/km）","name":"2023-09-18","value":20},
        {"type":"行驶历程（/km）","name":"2023-09-19","value":77},
        {"type":"行驶历程（/km）","name":"2023-09-20","value":70},
        {"type":"行驶历程（/km）","name":"2023-09-21","value":22},
        {"type":"行驶历程（/km）","name":"2023-09-22","value":24},
        {"type":"行驶历程（/km）","name":"2023-09-23","value":43},
        {"type":"行驶历程（/km）","name":"2023-09-24","value":49}
      ]

      state.areaChartData.dataList = [
        {"type":"运营车辆（/辆）","name":"2023-09-18","value":20},
        {"type":"运营车辆（/辆）","name":"2023-09-19","value":77},
        {"type":"运营车辆（/辆）","name":"2023-09-20","value":70},
        {"type":"运营车辆（/辆）","name":"2023-09-21","value":22},
        {"type":"运营车辆（/辆）","name":"2023-09-22","value":24},
        {"type":"运营车辆（/辆）","name":"2023-09-23","value":43},
        {"type":"运营车辆（/辆）","name":"2023-09-24","value":49},
      ]

      state.tableData.dataList = [
        {pm:1,cph:'冀EQ2641',ysqy:'赞皇县鑫豪运输有限公司',yslx:'普货运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '/km'},
        {pm:2,cph:'冀EQ9738',ysqy:'邢东新区娇元道路运输部',yslx:'危货运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '/km'},
        {pm:3,cph:'冀EQ1235',ysqy:'邢台旭越运输有限公司',yslx:'旅客运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '/km'},
        {pm:4,cph:'冀EQ8623',ysqy:'平山县恒宁运输队',yslx:'出租网约',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '/km'},
        {pm:5,cph:'冀AF6Y07',ysqy:'南和区超阳货物运输服务部',yslx:'城市公交',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '/km'},
        {pm:6,cph:'冀ALH111',ysqy:'河北长源电气工程有限公司',yslx:'场站维修',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '/km'},
        {pm:7,cph:'冀AS8976',ysqy:'任县申通快递服务有限公司',yslx:'邮政转运',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '/km'},
        {pm:8,cph:'冀AZR972',ysqy:'邢台沐凯建筑工程有限公司',yslx:'汽车租赁',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '/km'},
        {pm:9,cph:'冀EQ2641',ysqy:'赞皇县鑫豪运输有限公司',yslx:'普货运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '/km'},
        {pm:10,cph:'冀EQ9738',ysqy:'邢东新区娇元道路运输部',yslx:'危货运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '/km'},
        {pm:11,cph:'冀EQ1235',ysqy:'邢台旭越运输有限公司',yslx:'旅客运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '/km'},
        {pm:12,cph:'冀EQ8623',ysqy:'平山县恒宁运输队',yslx:'出租网约',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '/km'},
        {pm:13,cph:'冀AF6Y07',ysqy:'南和区超阳货物运输服务部',yslx:'城市公交',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '/km'},
        {pm:14,cph:'冀ALH111',ysqy:'河北长源电气工程有限公司',yslx:'场站维修',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '/km'},
        {pm:15,cph:'冀AS8976',ysqy:'任县申通快递服务有限公司',yslx:'邮政转运',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '/km'},
      ]
      state.tableData1.dataList = [
        {pm:1,cph:'冀EQ2641',ysqy:'赞皇县鑫豪运输有限公司',yslx:'普货运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:2,cph:'冀EQ9738',ysqy:'邢东新区娇元道路运输部',yslx:'危货运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:3,cph:'冀EQ1235',ysqy:'邢台旭越运输有限公司',yslx:'旅客运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:4,cph:'冀EQ8623',ysqy:'平山县恒宁运输队',yslx:'出租网约',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:5,cph:'冀AF6Y07',ysqy:'南和区超阳货物运输服务部',yslx:'城市公交',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:6,cph:'冀ALH111',ysqy:'河北长源电气工程有限公司',yslx:'场站维修',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:7,cph:'冀AS8976',ysqy:'任县申通快递服务有限公司',yslx:'邮政转运',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:8,cph:'冀AZR972',ysqy:'邢台沐凯建筑工程有限公司',yslx:'汽车租赁',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:9,cph:'冀EQ2641',ysqy:'赞皇县鑫豪运输有限公司',yslx:'普货运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:10,cph:'冀EQ9738',ysqy:'邢东新区娇元道路运输部',yslx:'危货运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:11,cph:'冀EQ1235',ysqy:'邢台旭越运输有限公司',yslx:'旅客运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:12,cph:'冀EQ8623',ysqy:'平山县恒宁运输队',yslx:'出租网约',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:13,cph:'冀AF6Y07',ysqy:'南和区超阳货物运输服务部',yslx:'城市公交',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:14,cph:'冀ALH111',ysqy:'河北长源电气工程有限公司',yslx:'场站维修',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:15,cph:'冀AS8976',ysqy:'任县申通快递服务有限公司',yslx:'邮政转运',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
      ]

      subjectVehicleVehicleOperateTrend();
    }

    //车辆周期内运营趋势统计
    const subjectVehicleVehicleOperateTrend = ()=>{

      $axios.post(apiUrl.subjectVehicleVehicleOperateTrend,{}).then((res) => {
        if(!!res){

          // todo  开发的时候 暂时不去频繁请求
          return false;
          let mun = $common.randomNum(8,12);
          setTimeout(()=>{
            subjectVehicleVehicleOperateTrend()
          }, mun  * 1000)
        }
      }).catch((err) => {
        console.log("失败", err)
      })
    }



    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      loadInit()
      state.moduleRef.camber({id:'pieId','name':'车辆营运',value:30,fontColor:'#28BCFE',lineColor:['#25BFFF','#5284DE','#2A95F9','#fff']})
      state.moduleRef.camber({id:'pieId1','name':'车辆离线',value:60,fontColor:'#ff9900',lineColor:['#bd7203','#805801','#643d03','#fff']})
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
    }
  }
})


</script>
<style lang="less">
._wz_operations{
  position: relative;
  height: 100%;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  ._wz_operations_list{
    height: calc((100% - 20px) / 3);
    .listItemTopl{
      width: 32px;
      height: 20px;
      font-size: 12px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 5px;
      cursor:pointer;
    }
    .top0{
      border: 1px solid;
      background: linear-gradient(45deg, #2C76BA, #779EBC);
      border-image: linear-gradient(45deg, #779EBC, #2C76BA) 1 1;
    }
    .top1{
      border: 1px solid;
      background: linear-gradient(45deg, #149f68, #079164);
      border-image: linear-gradient(45deg, #0b851e, #09b036) 1 1;
    }
  }
}
</style>
